<template>
  <div ref="peripheryMapRef" id="peripheryMap" style="height: 500px"></div>
  <a-spin :spinning="false" size="large">
    <div class="home-page">
      <div class="home-title">
        <img src="../../assets/images/icon/title.png" alt="">
      </div>
      <div class="home-little">
        <a-avatar :size="50">
          <template #icon><User-Outlined /></template>
        </a-avatar>
        <div>
          <span>
            <span>测试(巡检员)</span>
          </span>
          <div>安全系统</div> 
        </div>
        <a-button size="small" style="margin-top: 12px;margin-left: 20px;">退出</a-button>
      </div>
      <a-row :gutter="12">
        <a-col :span="8" v-for="(item, index) in dataList" :key="index" @click="goUrl(item.url)">
          <div class="home-item">
            <img :src="item.img" alt="">
            <span>{{ item.name }}</span>
          </div>          
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted } from "vue"
import { UserOutlined, SettingOutlined } from "@ant-design/icons-vue";

const peripheryMapRef = ref(null);
const dataList = ref([
    { name: "每日巡检", url: "/form", icon: "comment-o", img: require("@/assets/images/icon/1.png") },
    { name: "巡检记录", url: "/list", icon: "todo-list-o", img: require("@/assets/images/icon/3.png") },
    { name: "巡检异常记录", url: "/listError", icon: "todo-list-o", img: require("@/assets/images/icon/4.png") }
  ]);

onMounted(() => {
  initPage()
})

function initPage() {
  AMapLoader.load({
    "key": "5e27b1fe8fccaa0a70e8628523b4f3b0"
  }).then((AMap)=>{
    // 初始化地图
    peripheryMapRef.value = new AMap.Map('peripheryMap',{
      resizeEnable: true,
      mapStyle: "amap://styles/088261f832c5039818a211e36619cef2",
      center: [120.742475, 30.736489],
      zoom: 17,
      zooms: [2,22],
      viewMode: "3D",
      showBuildingBlock: true,
      pitch: 55,
      rotation: -115
    });
  }).catch(e => {
    console.log(e);
  });
}

function goUrl(url) {
  router.push(url)   
  if(url == '/form') {
    goForm(localStorage.getItem("longitude"), localStorage.getItem("latitude"))
  } else if(!!url) {
    router.push(url)    
  }
}
</script>

<style scoped lang="less">
:deep(.van-icon) {
  text-align: center;
}
.home-page {
  height: 100vh;
  background-color: rgb(243, 244, 249);
  padding: 15px 20px;

  .home-title {

      h1 {
        font-weight: 700;
        margin: 0;
      }

      span {
        color:rgb(181, 181, 181);
      }    

      img {
        width: 100%;
      }

  }

  .home-container {
    display: flex;
  }

  .home-item {
    width: 100%;
    background-color: rgb(255, 255, 255);
    margin-top: 15px;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    line-height: 40px;

    span {
      display: block;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      color: #222;
      font-family: Source Han Sans CN;
    }

    img {
      width: 50px;
      margin: 0 auto;
    }

  }

  .home-little {
    width: 100%;
    background-color: rgb(255, 255, 255);
    margin-top: 15px;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    line-height: 40px;

    div > span {
      display: block;
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      white-space: nowrap;
      margin-left: 25px;
      color: #343434;

      span {
        font-size: 12px;
      }

    }

    div {
      line-height: 1.5;

      div {
        margin-left: 25px;
        color: #717171;
      }

    }

  }
}
</style>
